<!-- sign_up -->
<template>
  <div class="login_main"  ref="vantaRef">
    <div class="login_form">
      <div class="leftImg">
        <img src="@/assets/loginImg/login.jpg" alt="" />
      </div>
      <div class="rightForm">
        <el-form
          :rules="formRules"
          :label-position="labelPosition"
          ref="ruleFormRef"
          label-width="100px"
          :model="ruleForm"
          style="max-width: 460px"
        >
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="ruleForm.userName" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="goLogin(ruleFormRef)">
              登录
            </el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import rule from '@/util/pattern.js'
import * as THREE from 'three';
  import DOTS from "vanta/src/vanta.waves.js"
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import api from '@/services/api'
import { useStore } from '@/store/user'
const store = useStore()
const router = useRouter()
const ruleForm = reactive({})
const labelPosition = ref('right')
const ruleFormRef = ref()
const formRules = reactive({
    userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' },],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { validator: rule.notValidInputText, trigger: 'blur' },
    ],
})

// 引用 DOM 元素
const vantaRef = ref(null);
// Vanta effect
let vantaEffect = null;

onMounted(() => {
  ceshiMock()
  console.log(import.meta.env.VITE_JFZG_API_URL);
  
    if (vantaRef.value) {
    vantaEffect = DOTS({
      el: vantaRef.value,
      THREE: THREE,
      mouseControls: true, // 鼠标控制
      gyroControls: true, // 陀螺仪控制
      // minHeight: 10.0, // 最小高度
      // minWidth: 200.0, // 最小宽度
      highlightColor: 0x008cba, // 突出色调
      midtoneColor: 0x0094d9, // 中间色调
      lowlightColor: 0x00b4f4, // 暗色调
      baseColor: 0xffffff, // 低色调
      blurFactor: 0.52, // 模糊因素
      speed: 5, // 速度
      zoom: 3, // 变焦
    });
  }
});
// 销毁 Vanta 效果
onBeforeUnmount(() => {
  if (vantaEffect) {
    vantaEffect.destroy();
  }
});
const ceshiMock=()=>{
  api.selectCity().then((res)=>{
        // console.log('res',res);
    })
}
// 忘记密码提示
const resetForm = () => {
    Object.keys(ruleForm).forEach(key => {
        ruleForm[key] = '';
    });
};
let goLogin = (formEl) => {
    formEl.validate((valid) => {
        if (valid) {
          sessionStorage.setItem('token','2342423432')
                        ElMessage.success('登陆成功');
                    router.push('/manager')
            // login(ruleForm).then((res) => {
            //     if (res.code == 200) {
            //         store.getUserToken(res.token)
            //         ElMessage.success('登陆成功');
            //         router.push('/other')
            //     } else {
            //         ElMessage.error(res.success);
            //         resetForm()
            //     }
            // }).catch((error) => {
            //     console.log('11');
            //     ElMessage.error(error);
            //     resetForm()
            // });
        }

    })


}
</script>

<style scoped lang="less">
.login_main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2b4b6b;

}

.login_form {
  width: 45%;
  height: 40%;
  background-color: white;
  border-radius: 10px;
  margin-top: -50px;
  margin-right: 50px;
  display: flex;
  overflow: hidden;
  justify-content: space-around;
  padding: 20px;
  box-shadow:1px 1px 10px 10px #409EFF inset;


  .leftImg {
    width: 50%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .rightForm {
    // flex: 1;
    display: flex;
    align-items: center;
    // background-color: blue;
  }
}

.login-info {
  margin-top: 10px;
}
</style>
